<template>
  <input v-model="picture.width" max="500" min="100" type="range" />

  <hr />
  <!-- v-bind: 为 src 属性绑定指定的数据源 -->
  <img v-bind:src="picture.src" v-bind:width="picture.width" />
  <!-- : v-bind:的缩写形式 -->
  <img :src="picture.src" :width="picture.width" />

  <hr />
  <!-- 如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除 -->
  <button @click="picture.width = null">设置宽度为NULL</button>
</template>

<script setup>
import { reactive } from 'vue'

let picture = reactive({
  src: 'https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg', // 图像地址
  width: 200, // 显示宽度
})
</script>

<script>
export default {
  data: () => ({
    picture: {
      width: 200,
      src: 'https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg',
    },
  }),
}
</script>
